<template>
    <div id="menu">
        <div class="top">
            <el-container style="height: 650px;">
                <el-aside width="200px" style="background: #FFFFFF;">
                    <div class="title">
                        <img src="../image/touxiang.png" alt="" class="header">
                        <div class="text">顺义文化馆</div>
                        <div class="integration">
                            <img src="../image/jifenlogo.png" alt="" class="logo">{{integration}}积分
                        </div>
                    </div>
                    <el-menu router collapse-transition>
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-circle-plus-outline"></i>会员中心</template>
                            <el-menu-item index="/menu/modifyInformation">基本信息修改</el-menu-item>
                            <el-menu-item index="/menu/modifyPassword">密码修改</el-menu-item>
                            <el-menu-item index="/menu/modifyPhone">手机号修改</el-menu-item>
                            <el-menu-item index="/menu/modifyMailbox">邮箱修改</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title"><i class="el-icon-circle-plus-outline"></i>服务中心</template>
                            <el-menu-item index="/menu/recordStudy">学习记录</el-menu-item>
                            <el-menu-item index="/menu/recordVenue">场馆预约</el-menu-item>
                            <el-menu-item index="/menu/recordActivity">活动记录</el-menu-item>
                            <el-menu-item index="/menu/myMessage">我的消息</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title"><i class="el-icon-circle-plus-outline"></i>我的积分</template>
                            <el-menu-item index="/menu/integralRecord">积分记录</el-menu-item>
                            <el-menu-item index="/menu/integralRule">积分规则</el-menu-item>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title"><i class="el-icon-circle-plus-outline"></i>我的收藏</template>
                            <el-menu-item index="/menu/collectVenue">场馆收藏</el-menu-item>
                            <el-menu-item index="/menu/collectActivity">活动收藏</el-menu-item>
                            <el-menu-item index="/menu/collectStudy">学习收藏</el-menu-item>
                        </el-submenu>
                        <el-submenu index="5">
                            <template slot="title"><i class="el-icon-circle-plus-outline"></i>璀璨空间</template>
                            <el-menu-item index="/menu/publishRecord">发布记录</el-menu-item>
                            <el-menu-item index="/menu/publishWorks">发布作品</el-menu-item>
                        </el-submenu>
                        <el-submenu index="6">
                            <template slot="title"><i class="el-icon-circle-plus-outline"></i>我的社团</template>
                            <el-menu-item index="/menu/clubJoin">加入的社团</el-menu-item>
                            <el-menu-item index="/menu/clubNotice">社团公告</el-menu-item>
                            <el-menu-item index="/menu/clubSeparate">社团分采</el-menu-item>
                            <el-menu-item index="/menu/clubMember">成员管理</el-menu-item>
                        </el-submenu>
                        <el-submenu index="7">
                            <template slot="title"><i class="el-icon-circle-plus-outline"></i>帮助中心</template>
                            <el-menu-item index="/menu/helpCenter">帮助中心</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <!-- 右侧内容 -->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </div>
        <!-- 空白 -->
        <div class="null"></div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            integration: "180", // 积分
        };
	},
    mounted(){},
	methods: {},
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){
    #menu{
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
        .top{
            height: 750px;
            display: flex;
            align-content: center;
            align-items: center;
            background: #F0F0F0;
            .el-container{
                max-width: 80%;
                margin: 0% 10%;
                .title{
                    text-align: center;
                    .header{
                        width: 25%;
                        margin: 5% 0%;
                    }
                    .text{
                        font-size: 18px;
                    }
                    .integration{
                        color: #F29418;
                        .logo{
                            width: 5%;
                            margin-top: 5%;
                        }
                    }
                }
                .el-menu-item.is-active{
                    color: #F29418;
                }
                .el-submenu__icon-arrow{
                    color: white;
                }
                .el-main {
                    color: #333;
                    padding: 0px;
                    background: white;
                    margin-left: 1%;
                }
            }
        }
        .null{
            width: 100%;
            height: 104px;
            background: #F0F0F0;
            position: absolute;
            bottom: -13%;
            left: 0%;
        }
    }
}



@media screen and (max-width: 1400px){
    #menu{
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
        .top{
            height: 720px;
            display: flex;
            align-content: center;
            align-items: center;
            background: #F0F0F0;
            .el-container{
                max-width: 76%;
                margin: 0% 12%;
                .title{
                    text-align: center;
                    .header{
                        width: 23%;
                        margin: 5% 0% 4% 0%;
                    }
                    .text{
                        font-size: 16px;
                    }
                    .integration{
                        color: #F29418;
                        .logo{
                            width: 5%;
                            margin-top: 4%;
                        }
                    }
                }
                .el-menu-item.is-active{
                    color: #F29418;
                }
                .el-submenu__icon-arrow{
                    color: white;
                }
                .el-main {
                    color: #333;
                    padding: 0px;
                    background: white;
                    margin-left: 1%;
                }
            }
        }
        .null{
            width: 100%;
            height: 104px;
            background: #F0F0F0;
            position: absolute;
            bottom: -14%;
            left: 0%;
        }
    }
}
</style>